<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>我的报表</title>
    <script src="js\jquery.min.js"></script>
    <script src="js\Highchart.js"></script>
    <script src="layui\layui.all.js"></script>
  <link rel="stylesheet" href="layui\css\layui.css">
 <!-- <link rel="stylesheet" href="\css\index.css">-->
</head>
<body>
 

<div class="layui-bg-green" style="height:80px;width:100%;text-align:center;"><h1 style="color:white;font-weight:bold;font-size:2.5em;line-height:80px;font-family:华文彩云;">大数据基线检测报告<h1></div>
<!--<hr class="layui-bg-green" style="margin-bottom:100px;margin-top:100px;">-->
<div class="layui-tab">
  <!--<ul class="layui-tab-title">-->
    <!--<li class="layui- this">检查信息</li>-->
    <!--<li>不合规项目分布</li>
    <!--<li>受检设备一览</li>-->
 <!-- </ul>-->
 <h1 style="font-family:宋体;font-size:1.5em;font-weight:bold;margin-bottom:30px">检查信息</h1>
  <div class="part">
    <div class="partone">
	<table class="my" style="width:95%;height:250px;margin:0 auto">
 <!-- <thead>-->
    <tr style="width:100%">
	<th style="background-color:#ECFFFF;padding:10px">任务编号</th>
	<td style="width:40%;padding:10px">${taskno!}</td>
	<th style="background-color:#ECFFFF;padding:10px">计划名称</th>
	<td style="width:40%;padding:10px">${planname!}</td>
	</tr>
	<tr style="width:100%;background-color:#ECFFFF">
	<th style="padding:10px">任务创建者</th>
	<td style="width:40%;padding:10px">${taskcreate!}</td>
	<th style="padding:10px">受检项总数量</th>
	<td style="width:40%;padding:10px">${checktotal!}</td>
	</tr>
	<tr class="head">
	<th style="background-color:#ECFFFF;padding:10px">受检设备数量</th>
	<td style="width:40%;padding:10px">${eqptotal!}</td>
	<th style="background-color:#ECFFFF;padding:10px">受检组件</th>
	<td style="width:40%;padding:10px">${checkgroup!}</td>
	</tr>
	<tr style="width:100%;background-color:#ECFFFF">
	<th style="padding:10px">任务开始时间</th>
	<td style="width:40%;padding:10px">${tasttime!}</td>
	<th style="padding:10px">任务结束时间</th>
	<td style="width:40%;padding:10px">${endtime!}</td>
	</tr>
	<tr>
	<th style="background-color:#ECFFFF;padding:10px">任务耗时（秒）</th>
	<td style="width:40%;padding:10px">${usetime!}</td>
	<th style="background-color:#ECFFFF;padding:10px">合规率</th>
	<td style="width:40%;padding:10px">${compliance!}</td>	
	</tr>
	<tr style="width:100%;background-color:#ECFFFF">
	<th style="padding:10px">合规项数量</th>
	<td style="width:40%;padding:10px">${cmpnumber!}</td>
	<th style="padding:10px">不合规项数量</th>
	<td style="width:40%;padding:10px">${nocmpnumber!}</td>
	</tr>
	
 <!-- </thead> -->
  
</table>
</div>
<hr class="layui-bg-green" style="margin-bottom:20px;margin-top:100px">
<h1 style="font-family:宋体;font-size:1.5em;font-weight:bold;margin-bottom:30px">不合规项目分布</h1>
    <div class="parttwo" style="width:100%;height:500px;margin-bottom:100px">
	<div id="container" style="width:50%;float:left;height:500px;margin:0 auto;"></div>
    <div id="containerTwo" style="width:50%;float:right;height:400px;margin:0 auto;"></div>
	</div>
	<hr class="layui-bg-green" style="margin-bottom:20px;margin-top:100px;">
	<h1 style="font-family:宋体;font-size:1.5em;font-weight:bold">受检设备一览</h1>
    <div class="partthree" style="margin-left:35px;margin-top:30px"> 
<table class="layui-table" lay-size="sm"  lay-filter="test" id="tab">
</table>   
</div>
	<hr class="layui-bg-green" style="margin-bottom:20px;margin-top:100px">
      <h1 style="font-family:宋体;font-size:1.5em;font-weight:bold;margin-bottom:30px">不合规项目明细表</h1>
      <div class="partfour">
          <table id="vuln_distribution" class="report_table" style="width:95%;border:1px solid #ddd;border-collapse: collapse;margin-left: 30px;" >
              <thead>
              <tr class="second_title" style="border:1px solid #ddd;">
                  <th style='border-right:1px solid #ddd;width:40px;background-color: #ECFFFF;text-align: center'>序号</th>
                  <th style='border:1px solid #ddd;background-color: #ECFFFF;text-align: center'>安全基线项目名称</th>
                 <th style='border:1px solid #ddd;background-color: #ECFFFF;width:60px'>影响主机个数</th>
                  <th style='border:1px solid #ddd;width:40px;background-color: #ECFFFF;text-align: center'>影响主机百分比</th>
                  <th style='border:1px solid #ddd;width:30px;background-color: #ECFFFF;text-align: center'>出现次数</th>
              </tr>
              </thead>
              <tbody id="nocmpdetail_body">
              </tbody>
          </table>
      </div>



<hr class="layui-bg-green" style="margin-bottom:20px;margin-top:100px">
      <h1 style="font-family:宋体;font-size:1.5em;font-weight:bold;margin-bottom:30px">合规项目明细表</h1>
      <div class="partfive" style="margin-left: 30px;margin-bottom: 200px">
          <table id="vuln_distribution" class="report_table" style="width:97%;border:1px solid #ddd;margin-left: 30px；margin-bottom: 200px" >
              <thead>
              <tr class="second_title" style="border:1px solid #ddd;background-color: #ECFFFF">
                  <th style='border-right:1px solid #ddd;width:40px;text-align: center;padding: 10px'>序号</th>
                  <th style='border:1px solid #ddd;text-align: center;padding: 10px'>安全基线项目名称</th>
                 <!-- <th style='border:1px solid #ddd;width:40px;text-align: center;padding: 10px'>脚本执行结果</th>
                  <th style='border:1px solid #ddd;width:40px;text-align: center;padding: 10px'>检查步骤</th>-->
              </tr>
              </thead>
              <tbody id="cmpdetail_body">
              </tbody>
          </table>
      </div>
     <!--<div class="layui-tab-item">内容4</div>-->
     <!--<div class="layui-tab-item">内容5</div>-->
  </div>
</div>
 
<script lauguage="JavaScript">
var ip ="${ip!}";
var check = "${check!}";
var cmp = "${cmp!}";
var nocmp = "${nocmp!}";
var rate = "${rate!}";
var dataresponse='${json!}';
var obj=JSON.parse(dataresponse);
layui.use('table', function(){
    var table = layui.table;
    //方法级渲染
    table.render({
        elem: '#tab'
        ,skin: 'row' //行边框风格
        ,even: true //开启隔行背景
        ,size: 'sm'
        ,cols: [[
            {field:'ip', title: 'IP', width:200, sort: true}
            ,{field:'check', title: '受检组件', width:260}
            ,{field:'cmp', title: '合规项总数', width:200}
            ,{field:'nocmp', title: '不合规项总数', width:200}
            ,{field:'rate', title: '合规率', width:200}

        ]]
        ,data:obj
        ,page: true
        ,height: 200
        ,width:1066
     ,page:false
    });

layui.use('element', function(){
  var element = layui.element;
 //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值ֵ
  var layid = location.hash.replace(/^#test1=/, '');
  element.tabChange('test1', layid);  //假设当前地址为：http://a.com#test1=222，那么选项卡    会自动切换到“发送消息”这一项
  
 //监听Tab切换，以改变地址hash值ֵ
  element.on('tab(test1)', function(){
    location.hash = 'test1='+ this.getAttribute('lay-id');
  });
});
});
</script>



<script language="JavaScript">
$(document).ready(function() {  
var data0="${data0!}";
var percent0="${percent0!}";
var a=parseFloat(percent0);
var data1="${data1!}";
var percent1="${percent1!}";
var b=parseFloat(percent1);
var data2="${data2!}";
var percent2="${percent2!}";
var c=parseFloat(percent2);
var data3="${data3!}";
var percent3="${percent3!}";
var d=parseFloat(percent3);
var data4="${data4!}";
var percent4="${percent4!}";
var e=parseFloat(percent4);
var data5="${data5!}";
var percent5="${percent5!}";
var f=parseFloat(percent5);
var data6="${data6!}";
var percent6="${percent6!}";
var g=parseFloat(percent6);
var data7="${data7!}";
var percent7="${percent7!}";
var h=parseFloat(percent7);
var data8="${data8!}";
var percent8="${percent8!}";
var i=parseFloat(percent8);
var data9="${data9!}";
var percent9="${percent9!}";
var j=parseFloat(percent9);

   var chart = {
       plotBackgroundColor: null,
       plotBorderWidth: null,
       plotShadow: false
   };
   var haha="${test}";
   var title = {
    
      text: haha
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         allowPointSelect: true,
         cursor: 'pointer',
         dataLabels: {
            enabled: true, 
			format: '{y}%'
         },                                                                                                                                                                                                                                                                                                                                                                                                                                 
         showInLegend: true
      }
   };
   var series= [{
      type: 'pie',
      name: 'Browser share',
      data: [
        [data0,a],
         [data1,       b],
         {
            name: data2,
            y: c,
            sliced: true,
            selected: true
         },
         [data3,    d],
         [data4,     e],
         [data5,   f],
		 [data6,   g],
		 [data7,   h],
		 [data8,   i],
		 [data9,j]


      ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;     
   json.tooltip = tooltip;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);  
});
</script>
 <script language="JavaScript">
     var ipstatic0="${ipstatic0!}";
     var iprate0="${iprate0!}";
     var k=parseFloat(iprate0);
     var ipstatic1="${ipstatic1!}";
     var iprate1="${iprate1!}";
     var g=parseFloat(iprate1);
     
$(document).ready(function() {  
   var chart = {
       plotBackgroundColor: null,
       plotBorderWidth: null,
       plotShadow: false
   };
   var title = {
      text: '按主机分布top(5)'   
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         allowPointSelect: true,
         cursor: 'pointer',
         dataLabels: {
            enabled: false           
         },
         showInLegend: true
      }
   };
   var series= [{
      type: 'pie',
      name: 'Browser share',
      data: [
         [ipstatic0,   k],
         [ipstatic1,g]
      ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;     
   json.tooltip = tooltip;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#containerTwo').highcharts(json);  
});
</script>
 <script>
//不合规项目
var arry='${noCmpDetailArray!}';
var obj=JSON.parse(arry);
var id;
for(var i=0;i<obj.length;i++){
var obj1=obj[i];
var content=obj1["des"];
var compliantName=obj1["name"];
var checkStep=obj1["checkStep"];
var checkStantard=obj1["standard"];
var suggestion=obj1["suggestion"];
var appearenceTime=obj1["appearenceTime"];
var totalDevice=obj1["totalDevice"];
var influencePercenString=obj1["influencePercenString"];
var Remarks=obj1["Remarks"];
    var DeviceIP=obj1["DeviceIp"];
    var  Compliant_No=obj1["compliancenumber"];
 id=("table"+i).toString();
 imgid=(i).toString();
var str1="<tr id=\"errtitle\" class=\"even vuln_high\" style=\"cursor:pointer;\">"+"<td style=\"border: 1px solid #ddd;\">"
       +i
	   +"</td>"
       +"<td style=\"border: 1px solid #ddd;\">"
       + "<img id= '"+imgid+"' src=\"img\\plus.gif\" onclick=\"addClick()\">"
        +"</img>"
       + "<span style='color:#E42B00'>"
	   +compliantName
	   +"</span>"
       +"</td>"
        +"<td style=\"border: 1px solid #ddd;\">"
        +appearenceTime
        +"\/"
        +totalDevice
        +"</td>"
       +"<td style=\"border: 1px solid #ddd;\">"
	   +influencePercenString
	   +"</td>"
        +"<td style=\"border: 1px solid #ddd;\">"
		+appearenceTime
		+"</td>"
   +"</tr>";

var str2="<tr class=\"more hide odd\" id= '"+id+"' style='width:95%;display:none;'>"
        +"<td style=\"padding-left:20px;border-left:1px solid #ddd;\" class=\"extend\" colspan='4' id=\"ex\">"
            +"<table style=\"white-space:pre-wrap;margin: 30px;width: 95%;border: 1px solid #ddd\" class=\"report_table\" >"
        +"<tr class=\"even\">"
        +"<th style='width: 130px;padding: 10px;text-align: center'>"
        +"安全基线编号"
        +"</th>"
        +"<td style='padding: 10px;'>"
        +Compliant_No
        +"</td>"
        +"</tr>"
        +"<tr class=\"even\" style=\"background:#ECFFFF;\">"
        +"<th style='width: 130px;padding: 10px;text-align: center'>"
        +"受影响主机"
        +"</th>"
        +"<td style='padding: 10px;'>"
        +DeviceIP
        +"</td>"
        +"</tr>"
				+"<tr class=\"odd\" >"
					+"<th style='width: 130px;padding: 10px;text-align: center'>"
					+"安全基线项说明"
					+"</th>"
					  +"<td style='padding: 10px;'>"
					  +content
					  +"</td>"
				+"</tr>"   
				+"<tr class=\"even\" style=\"background:#ECFFFF;\">"
					+"<th style='width: 130px;padding: 10px;text-align: center'>"
					+"检测操作步骤"
					+"</th>"
					  +"<td style='padding: 10px;'>"
					  +checkStep
			          +"</td>"
			    +"</tr>"
			    +"<tr class=\"odd\">"
			        +"<th style='width: 130px;padding: 10px;text-align: center'>"
			        +"基线符合性判定依据"
			        +"</th>"
			           +"<td style='padding: 10px;'>"
			           +checkStantard
			           +"</td>"
			    +"</tr>"

			    +"<tr class=\"even\" style=\"background:#ECFFFF;\">"
			         +"<th style='width: 130px;padding: 10px;text-align: center'>"
			         +"解决办法"
			         +"</th>"
			           +"<td style='padding: 10px;text-align: center'>"
			           +suggestion
			           +"</td>"
			    +"</tr>"
        +"<tr class=\"odd\">"
        +"<th style='width: 130px;padding: 10px;text-align: center'>"
        +"备注"
        +"</th>"
        +"<td style='padding: 10px;text-align: center'>"
        +Remarks
        +"</td>"
        +"</tr>"
            +"</table>"
            +"</td>"
+"</tr>"

$("#nocmpdetail_body").append(str1);
$("#nocmpdetail_body").append(str2);
//$.parser.parse();
}


//合规项目
var arry2='${CmpDetailArray!}';
//var regex=/\t/g
//var regex1=/\r\n/g
//arry2=arry2.replace(regex,"  ").replace(regex1,"\\n")
var obj2=JSON.parse(arry2);
for(var i=0;i<obj2.length;i++){
var obj3=obj2[i];
var DeviceIp=obj3["DeviceIp"];
var Compliant_Name=obj3["name"];
    var Compliant_No=obj3["compliancenumber"];
    var content=obj3["des"];
var ShellBackResult=obj3["ShellBackResult"];
    var checkstantard=obj3["standard"];
var checkStep=obj3["checkStep"];
    var suggestion=obj3["suggestion"];
    var Remarks=obj3["Remarks"];
var imgid2=("img"+i).toString();
    var id2=("table_"+imgid2).toString();
    var str1="<tr id=\"errtitle\" class=\"even vuln_high\" style=\"cursor:pointer;\">"+"<td style=\"border: 1px solid #ddd;\">"
            +i
            +"</td>"
            +"<td style=\"border: 1px solid #ddd;\">"
            + "<img id= '"+imgid2+"' src=\"img\\plus.gif\" onclick=\"addClickTwo()\">"
            +"</img>"
            + "<span style='color:#00BB00'>"
            +Compliant_Name
            +"</span>"
            +"</td>"
            +"</tr>";
    var str2="<tr class=\"more hide odd\" id= '"+id2+"' style='width:95%;display:none;'>"
            +"<td style=\"padding-left:20px;border-left:1px solid #ddd;\" class=\"extend\" colspan='4' id=\"ex\">"
            +"<table style=\"white-space:pre-wrap;margin: 30px;width: 95%;border: 1px solid #ddd\" class=\"report_table\" >"
            +"<tr class=\"even\">"
            +"<th style='width: 130px;padding: 10px;text-align: center'>"
            +"安全基线编号"
            +"</th>"
            +"<td style='padding: 10px;'>"
            +Compliant_No
            +"</td>"
            +"</tr>"
            +"<tr class=\"odd\" style=\"background:#ECFFFF;\">"
            +"<th style='width: 130px;padding: 10px;text-align: center'>"
            +"受影响主机"
            +"</th>"
            +"<td style='padding: 10px;'>"
            +DeviceIp
            +"</td>"
            +"</tr>"
            +"<tr class=\"even\" >"
            +"<th style='width: 130px;padding: 10px;text-align: center'>"
            +"安全基线项说明"
            +"</th>"
            +"<td style='padding: 10px;'>"
            +content
            +"</td>"
            +"</tr>"
            +"<tr class=\"odd\" style=\"background:#ECFFFF;\">"
            +"<th style='width: 130px;padding: 10px;text-align: center'>"
            +"检测操作步骤"
            +"</th>"
            +"<td style='padding: 10px;'>"
            +checkStep
            +"</td>"
            +"</tr>"
            +"<tr class=\"even\">"
            +"<th style='width: 130px;padding: 10px;text-align: center'>"
            +"基线符合性判定依据"
            +"</th>"
            +"<td style='padding: 10px;'>"
            +checkStantard
            +"</td>"
            +"</tr>"
            +"</tr>"
            +"<tr class=\"odd\" style=\"background:#ECFFFF;\">"
            +"<th style='width: 130px;padding: 10px;text-align: center'>"
            +"脚本执行结果"
            +"</th>"
            +"<td style=\"padding: 10px\">"
            +ShellBackResult
            +"</td>"
            +"</tr>"

            +"<tr class=\"even\" >"
            +"<th style='width: 130px;padding: 10px;text-align: center'>"
            +"解决办法"
            +"</th>"
            +"<td style='padding: 10px;text-align: center'>"
            +suggestion
            +"</td>"
            +"</tr>"
            +"<tr class=\"odd\" style=\"background:#ECFFFF;\">"
            +"<th style='width: 130px;padding: 10px;text-align: center'>"
            +"备注"
            +"</th>"
            +"<td style='padding: 10px;text-align: center'>"
            +Remarks
            +"</td>"
            +"</tr>"
            +"</table>"
            +"</td>"
            +"</tr>"


    $("#cmpdetail_body").append(str1);
    $("#cmpdetail_body").append(str2);
   }

function addClick(){
    var h=event.target.id;//这真是一个坑，之前一直用this.id获取不到当前点击事件的id,应该加上event.target这才是当前触发事件的id
    var y=document.getElementById(h);
    var tableid=("table"+h).toString();
    var x=document.getElementById(tableid);
    if(y.src.match("plus")){
        y.src="img\\minus.gif";
        x.style.display='table-row';
        //document.getElementById('ex').style.colspan=4;
    }else{
        y.src="img\\plus.gif";
        x.style.display='none';
    }

}
function addClickTwo() {
    var h = event.target.id;//这真是一个坑，之前一直用this.id获取不到当前点击事件的id,应该加上event.target这才是当前触发事件的id
    var y = document.getElementById(h);
    var tableid = ("table_" + h).toString();
    var x = document.getElementById(tableid);
    if (y.src.match("plus")) {
        y.src = "img\\minus.gif";
        x.style.display = 'table-row';
        //document.getElementById('ex').style.colspan=4;
    } else {
        y.src = "img\\plus.gif";
        x.style.display = 'none';
    }
}
 </script>
</body>
</html>